<template>
  <div>
    <Row :gutter="10">
      <Col>
      <Card>
        <div class="live_wrapper clearfix"
             style="margin-top: 10px">
          <Input v-model="filter.name"
                 @on-search="search"
                 search
                 enter-button="搜索"
                 placeholder="请输入用户姓名"
                 style="float:left; display:inline-table; width: 210px;" />
          <Input v-model="filter.phone"
                 @on-search="search"
                 search
                 enter-button="搜索"
                 placeholder="请输入用户手机号"
                 style="float:left; display:inline-table; width: 210px; margin-left:10px" />
          <Input v-model="filter.order_sn"
                 @on-search="search"
                 search
                 enter-button="搜索"
                 placeholder="请输入订单号"
                 style="float:left; display:inline-table; width: 210px; margin-left:10px" />
          <DatePicker type="daterange"
                      v-model="created_at"
                      @on-change="search"
                      placement="bottom-end"
                      placeholder="选择退款时间"
                      style="float:left; width: 200px; margin-left: 10px; margin-left:10px"></DatePicker>
          <Button type="primary"
                  @click.stop="exportData()"
                  style="float:left; width: 80px;height: 34px;font-size: 14px; margin-left: 10px">导出</Button>
        </div>
        <p class="admin_title">
          全部订单
        </p>
        <Row class="margin-top-10 table_pattern table_pattern2">
          <Table style="width: calc(100vw - 256px - 36px - 32px)"
                 :loading="loading"
                 :columns="columns"
                 :data="list"></Table>
        </Row>
        <Row class="margin-top-10">
          <Page :total="pagenation.totalPage"
                :page-size="pagenation.perPage"
                :current="pagenation.currentPage"
                show-elevator
                show-total
                @on-change="change"></Page>
        </Row>
      </Card>
      </Col>
    </Row>
    <Modal v-model="show_audit_refund"
           title="退款审核"
           width="500px"
           :mask-closable="false"
           class="goods_modal cyj_modal">
      <Form :label-width="90">
        <FormItem label="审核结果"
                  class="view_type1">
          <div style="float: left;">
            <RadioGroup v-model="audit_status">
              <Radio label="1">通过</Radio>
              <Radio label="2">不通过</Radio>
            </RadioGroup>
          </div>
        </FormItem>
        <FormItem label="审核备注"
                  class="view_type1"
                  v-if='audit_status == 2'>
          <Input v-model="audit_reason"
                 type="textarea"
                 :rows="5"
                 placeholder="请输入审核备注(选填)" />
        </FormItem>
        <FormItem>
          <Button type="primary"
                  @click="orderRefundSubmit"
                  style="width: 90px;height: 35px;border-radius: 0;font-size: 14px; margin-left:80px">提交</Button>
        </FormItem>
      </Form>
    </Modal>
    <Modal title="查看图片"
           v-model="visible"
           class="visible_modal">
      <swiper :options="swiperOption"
              ref="swiperOption"
              style="height: 600px;">
        <swiper-slide v-for="(it2,idx) in imgList"
                      :key="idx">
          <img :src="it2"
               alt=""
               width="100%"
               style="height: 600px;-o-object-fit: contain;object-fit: contain;" />
        </swiper-slide>
        <div class="swiper-button-prev"
             slot="button-prev"
             v-show="imgList.length > 1"></div>
        <div class="swiper-button-next"
             slot="button-next"
             v-show="imgList.length > 1"></div>
      </swiper>
    </Modal>
  </div>
</template>
<script>
import Time from '@/tool/Time'
import { orderRefundList, auditOrderRefund } from '@/api/main'
export default {
  data () {
    return {
      pagenation: {},
      columns: [
        {
          key: 'user_name',
          title: '用户姓名',
          render: (h, params) => {
            return h('strong', params.row.user_name)
          },
        },
        {
          key: 'user_phone',
          title: '手机号',
          render: (h, params) => {
            return h('strong', params.row.user_phone)
          },
        },
        {
          key: 'order_sn',
          title: '订单号',
          render: (h, params) => {
            return h('strong', params.row.order_sn)
          },
        },
        {
          key: 'refund_money',
          title: '退款金额',
          render: (h, params) => {
            return h('strong', params.row.refund_money)
          },
        },
        
        {
          key: 'imgs',
          title: '退款图片',
          align: 'center',
          render: (h, params) => {
            let arr = []
            if (params.row.refund_imgs.length) {
              arr.push(h(
                'img',
                {
                  style: {
                    width: '100px',
                    height: '100px',
                    margin: '10px 0',
                    position: 'relative',
                    cursor: 'pointer',
                    objectFit: 'cover',
                  },
                  attrs: {
                    src: params.row.refund_imgs[0]
                  },
                  on: {
                    click: () => {
                      this.imgList = []
                      this.imgList = params.row.refund_imgs
                      this.visible = true
                      this.$refs.swiperOption.$swiper.slideTo(0, 1000, false)
                    }
                  }
                }
              ))
              return h(
                'div',
                {
                  style: {
                    overflow: 'hidden'
                  },
                },
                arr
              )
            }
          },
        },
        {
          key: 'refund_reason',
          title: '退款理由',
          render: (h, params) => {
            return h('strong', params.row.refund_reason)
          },
        },
        {
          key: 'created_time',
          title: '申请时间',
          render: (h, params) => {
            return h('strong', params.row.created_time)
          },
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    size: 'small'
                  },
                  style: {
                    marginBottom: '5px',
                    marginRight: '5px',
                    border: 'none',
                    background: 'transparent',
                    fontSize: '14px',
                    color: '#377EEF',
                    display: params.row.refund_state == 0 ? 'inline-block' : 'none'
                  },
                  on: {
                    click: () => {
                      this.orderRefund(params.row)
                    },
                  },
                },
                '审核',
              ),
            ])
          },
        },
      ],
      list: [],
      loading: true,
      filter: {
        page: 0,
        page_size: 20,
        name: '',
        phone: '',
        order_sn: '',
        created_range: '',
      },
      show_audit_refund: false,
      audit_status: '1',
      audit_reason: '',
      created_at: '',
      imgList: [],
      visible: false,
      swiperOption: {
        // 设置点击箭头
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      isSubmiting: false,
    }
  },
  watch: {
    'created_at': function () {
      let created_at_start = Time.dateToTimestamp(this.created_at[0])
      let created_at_end = Time.dateToTimestamp(this.created_at[1])
      if (created_at_start !== 0 && created_at_end !== 0) {
        this.filter.created_range = created_at_start + '-' + created_at_end
      } else {
        this.filter.created_range = ''
      }
    }
  },
  methods: {
    change: function (page) {
      this.loading = true
      this.filter.page = page - 1
      this.init()
    },
    search: function () {
      this.filter.page = 0
      this.init()
    },
    orderRefund (item) {
      let _this = this
      _this.cur_obj = item
      _this.show_audit_refund = true
    },
    orderRefundSubmit () {
      let _this = this
      if (_this.audit_status == 2 && _this.audit_reason == '') {
        _this.$Message.error("请输入拒绝理由"); return;
      }
      if (_this.isSubmiting) {
        return
      }
      _this.isSubmiting = true
      let obj = {}
      obj.id = _this.cur_obj.id
      obj.audit_status = _this.audit_status
      obj.audit_reason = _this.audit_reason
      auditOrderRefund(obj).then(res => {
        if (res.code == 0) {
          _this.$Message.success('操作成功')
          _this.show_audit_refund = false
          _this.audit_status = '1'
          _this.audit_reason = ''
          _this.init()
        } else {
          _this.$Message.error(res.text)
        }
        setTimeout(() => {
          this.isSubmiting = false
        }, 1000);
      })
    },
    init () {
      orderRefundList(this.filter).then(res => {
        if (res.code == 0) {
          this.list = res.data
          this.loading = false
          this.pagenation.currentPage = parseInt(res.currentPage) + 1
          this.pagenation.totalPage = parseInt(res.totalPage)
          this.pagenation.perPage = parseInt(res.perPage)
        }
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    exportData () {
      let _this = this
      _this.filter.page = 0
      _this.filter.page_size = 500
      _this.export_list = []
      _this.export()
    },
    export () {
      let _this = this
      orderRefundList(this.filter).then(res => {
        if (res.code == 0) {
          if (res.data.length) {
            _this.export_list.push.apply(_this.export_list, res.data)
            _this.filter.page++
            _this.export()
          } else {
            _this.filter.page_size = 20
            const { export_json_to_excel } = require('../../excel/Export2Excel');
            const tHeader = ['订单号', '商品', '金额', '用户姓名', '用户手机号', '退款图片', '退款理由', '申请时间'];
            const filterVal = ['order_sn', 'good_name', 'refund_money', 'user_name', 'user_phone', 'refund_imgs', 'refund_reason', 'created_time'];
            const data = _this.formatJson(filterVal, _this.export_list)
            export_json_to_excel(tHeader, data, '订单退款信息')
          }
        }
      })
    },
  },
  mounted () {
    this.filter.order_id = this.$route.params.order_id
    this.init()
  }
}
</script>
<style lang="less">
@page {
	margin-top: 1mm; //去掉页眉
	margin-bottom: 1mm; //去掉页脚
}
.edui-notadd .edui-dialog {
	z-index: 2005 !important;
}
.edui-notadd {
	z-index: 2002 !important;
}
</style>
<style scoped lang="less">
/deep/ .edui-notadd .edui-dialog {
	z-index: 5000 !important;
}
/deep/ input::-webkit-input-placeholder {
	color: rgba(153, 153, 153, 0.47) !important;
	font-size: 14px !important;
}
/deep/ input::-moz-placeholder {
	color: rgba(153, 153, 153, 0.47) !important;
	font-size: 14px !important;
}
/deep/ input:-moz-placeholder {
	color: rgba(153, 153, 153, 0.47) !important;
	font-size: 14px !important;
}
/deep/ input:-ms-input-placeholder {
	color: rgba(153, 153, 153, 0.47) !important;
	font-size: 14px !important;
}
</style>
